<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: libowu
  Date: 18-10-16
  Time: 下午4:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://code.jquery.com/jquery-3.3.1.min.js" rel="stylesheet">

    <style type="text/css">
        html{
            padding: 0;
            margin: 0;
        }
        body{
            background: rgba(0,0,0,0);
            padding: 0;
            margin: 0;
        }
        h4{
            color: white;
        }
        .head{
            height: 500px;
            width: 100%;
            padding-left: 10%;
            padding-right: 10%;
            overflow: hidden;
        }

        .reviews{
            min-height: 400px;
            background: rgba(0,0,0,0.3);
            margin-left: 10%;
            margin-right: 10%;
            padding: 10px;
        }

        .reviews .commentNone{
            height: 300px;
            line-height: 300px;
            text-align: center;
            align-content: center;
            font-size: 32px;
            color: white;
        }

        .reviews h4{
            color: white;
        }

        .reviews .commentDetail{
            background: white;
            border-radius: 10px;
            padding: 10px;
            margin-top: 10px;
        }

        .alert{
            height: 400px;
            width: 400px;
            position: absolute;
            left: 38%;
            top: 27%;
            border-radius: 10px;
            padding: 0;
            overflow: hidden;
            display: none;
        }

        .alert .msg{
            height: 350px;
            text-align: center;
            align-content: center;
            width: 100%;
            background: #F0F0F0;
            border-radius: 10px 10px 0 0;
            line-height: 350px;
        }

        .alert .b{
            height: 50px;
            width: 100%;
            border-radius: 0 0 10px 10px;
            background: #2aabd2;
            display: flex;
        }

        .alert .b a{
            display: block;
            float: left;
            flex: 1;
            text-align: center;
            align-content: center;
            height: 50px;
            line-height: 50px;
            text-decoration: none;
            font-size: 20px;
            padding: 0;
            color: white;
        }

        .alert .b a:first-child{
            border-right: 1px rgba(0,0,0,0.3) solid;
        }

        .alert .b a:hover{
            background: #5bc0de;
        }



        .head .banner{
            width:40% ;
            height: 460px;
            float: left;
            overflow: hidden;
        }



        .head .info{
            width: 59%;
            height: 460px;
            float: right;
            background: rgba(0,0,0,0.3);
            padding: 20px;
            margin-left: 1%;
        }

        .head .info .itemInfo{
            color: white;
        }

        /*操作按钮*/
        .head .info .option{
            margin-top: 30px;
        }

        .head .info .option button{
            margin-left: 20px;
        }


        .head .info span{
            display: block;
            margin-top: 20px;
        }
        .head .info .name{
            font-size: 24px;
        }

        .head .info .itemType{
            width: 100%;
            height: 100px;
            margin-top: 10px;
            background: white;
        }

        .head .info .itemType span{
            float: left;
            margin-left: 20px;
        }
    </style>
</head>
<body>

<div class="head">
    <div id="carousel-example-generic" class="carousel slide banner" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="/img/appLogo/ysn.jpeg" alt="加载失败">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            <div class="item">
                <img src="/img/appLogo/ysn.jpeg" alt="加载失败">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            ...
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    <div class="info">


        <span class="name itemInfo">${item.name}</span>
        <span class="price itemInfo">价格：${item.price}</span>
        <span class="local itemInfo">位置：${item.local}</span>
        <span class="type itemInfo">类型：${item.type}</span>
        <span class="lessCount itemInfo" id="lessCount">库存：${item.lesscount}</span>
        <span class="shoppingType itemInfo">选择样式：</span>

        <div class="itemType">
            <span>
                <label >
                    <input type="radio" name="type"  value="黑色" checked class="type"/>黑色
                </label>
            </span>

            <span>
               <label >
                    <input type="radio" name="type"  value="黑色" class="type"/>白色
                </label>
            </span>

            <span>
                <label >
                    <input type="radio" name="type"  value="黑色" class="type"/>蓝色
                </label>
            </span>

            <span>
                <label >
                    <input type="radio" name="type"  value="黑色" class="type"/>金色
                </label>
            </span>

            <span>
                <label >
                    <input type="radio" name="type"  value="黑色" class="type"/>银白色
                </label>
            </span>

        </div>

        <div class="option">
            <a type="submit" class="btn btn-success" onclick="option('购买')" id="buy">购买</a>

            <c:if test="${borrow!=null}">
                <a type="submit" class="btn btn-success" onclick="option('借阅')" id="borrow">已借阅</a>
            </c:if>
            <c:if test="${borrow==null}">
                <a type="submit" class="btn btn-success" onclick="option('借阅')" id="borrow">借阅</a>
            </c:if>

            <c:if test="${collect!=null}">
                <a type="submit" class="btn btn-success" onclick="option('收藏')" id="collect">已收藏</a>
            </c:if>
            <c:if test="${collect==null}">
                <a type="submit" class="btn btn-success" onclick="option('收藏')" id="collect">收藏</a>
            </c:if>

            <c:if test="${shopping!=null}">
                <a type="submit" class="btn btn-success" onclick="option('购物车')" id="shoppingCat">已添加</a>
            </c:if>
            <c:if test="${shopping==null}">
                <a type="submit" class="btn btn-success" onclick="option('购物车')" id="shoppingCat">加入购物车</a>
            </c:if>
        </div>
    </div>
</div>


<%--评论区域--%>
<div class="reviews">
    <h4>评论区</h4>
<%--    <div class="commentDetail">
        <h5>libowu</h5>
        <textarea style="resize: none;width: 100%;padding: 4px;height: 70px;border: 1px rgba(0,0,0,0.1) solid;" readonly="readonly"></textarea>
    </div>--%>

    <c:forEach items="${comment}" var="comment">
        <div class="commentDetail">
            <h5>${comment.username}</h5>
            <textarea style="resize: none;width: 100%;padding: 4px;height: 70px;border: 1px rgba(0,0,0,0.1) solid;" readonly="readonly">${comment.content}</textarea>
        </div>
    </c:forEach>

    <c:if test="${comment.size()==0}">
        <div class="commentNone">
            暂无评论！
        </div>
    </c:if>

</div>


<%--显示提示区域--%>
<div class="alert" id="alert">
    <div class="msg" id="msg">
        确定是否购买？
    </div>
    <div class="b">
        <a href="#" id="yes" onclick="msg(true)">是</a>
        <a href="#" id="no" onclick="msg(false)">否</a>
    </div>
    <span id="optionType" hidden="hidden">购买</span>
</div>

<script type="text/javascript">
    var collect=document.getElementById("collect");
    var shoppingCat=document.getElementById("shoppingCat");
    var borrow=document.getElementById("borrow");

    if ('${login}'=='login'){
        parent.sengToLogin();
    }

    function msg(result,type){
        var optionType=document.getElementById("optionType");
        if(result){

            //获取所选类型
            var typeC=document.getElementsByClassName("type");
            var typeValue="";
            for (var i=0;i<typeC.length;i++){
                if (type[i].checked){
                    typeValue=typeC[i].value;
                }
            }

            if (optionType.innerText == '购买') {
                var info = {
                    'objectname': "${item.name}",
                    'username':'libowu',
                    'type':typeValue
                };

                document.getElementById('alert').style.display='none';
                $.ajax({
                    type: "post",
                    url: "/futer/buy",
                    data:JSON.stringify(info) ,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response, ifo) {
                        if (response=='请求被拒绝，无权限访问'){
                            parent.sengToLogin();
                            return;
                        }

                        var lessCount=document.getElementById("lessCount");
                        lessCount.innerText="库存："+response.lesscount;
                        alert("购买成功！");
                    }, error: function (err) {
                        alert("购买失败！");
                    }
                })
            }else if (optionType.innerText == '借阅') {
                if (borrow.innerText=='已借阅'){
                    return;
                }

                var info = {
                    'objectname': "${item.name}",
                    'username':'libowu',
                    'type':typeValue
                };

                document.getElementById('alert').style.display='none';
                $.ajax({
                    type: "post",
                    url: "/futer/borrow",
                    data:JSON.stringify(info) ,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response, ifo) {

                        if (response=='请求被拒绝，无权限访问'){
                            parent.sengToLogin();
                            return;
                        }

                        if (response.lesscount!=null){
                            alert("借阅成功");
                            var lessCount=document.getElementById("lessCount");
                            lessCount.innerText="库存："+response.lesscount;
                            borrow.innerText="已借阅";
                        } else if (response==-20){
                            alert("库存不足");
                        } else if (response==-10){
                            alert("您已借过改商品");
                        }
                    }, error: function (err) {
                        alert("借阅失败！");
                    }
                })
            }

        }else {
            document.getElementById('alert').style.display='none';
        }

    }


    function option(type) {
        var aler=document.getElementById("msg");
        var paren=document.getElementById("alert");
        var yes=document.getElementById("yes");
        var no=document.getElementById("no");
        var optionType=document.getElementById("optionType");

        if (type == '购买') {
            aler.innerText="确定是否购买？"
            paren.style.display='block';
            optionType.innerText="购买";
        }else if (type == '借阅') {
            if (borrow.innerText=='已借阅'){
                return;
            }
            aler.innerText="确定借阅？"
            paren.style.display='block';
            optionType.innerText="借阅";
        }


        //获取用户选择的类型
        var typeC=document.getElementsByClassName("type");
        var typeValue="";
        for (var i=0;i<type.length;i++){
            if (typeC[i].checked){
                typeValue=typeC[i].value;
            }
        }
        var info = {
            'objectname': "${item.name}",
            'username':'libowu',
            'type':typeValue
        };

        if (type == "收藏") {
            if (collect.innerText == '已收藏') {
                return;
            }

            document.getElementById('alert').style.display='none';
            $.ajax({
                type: "post",
                url: "/futer/collect",
                data:JSON.stringify(info) ,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response, ifo) {

                    if (response=='请求被拒绝，无权限访问'){
                        parent.sengToLogin();
                        return;
                    }
                    if (response==1){
                        alert("收藏成功");
                        collect.innerText="已收藏";
                    } else if (response==-10) {
                        alert("此物品已被您收藏过了");
                    }else {
                        aler("收藏失败");
                    }
                }, error: function (err) {
                    alert("收藏失败！");
                }
            })
        }else if (type == '购物车') {
            if (shoppingCat.innerText=='已添加'){
                return;
            }

            document.getElementById('alert').style.display='none';
            $.ajax({
                type: "post",
                url: "/futer/shoppingCat",
                data:JSON.stringify(info) ,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response, ifo) {

                    if (response=='请求被拒绝，无权限访问'){
                        parent.sengToLogin();
                        return;
                    }

                    if (response==1){
                        alert("添加成功");
                        shoppingCat.innerText="已添加";
                    } else if (response==-10) {
                        alert("此物品已被您添加过了");
                    }else {
                        aler("添加失败");
                    }
                }, error: function (err) {
                    alert("添加失败！");
                }
            })
        }
    }
</script>
</body>
</html>
